<template>
  <a-card title="补考任务列表">
    <a-table
      :columns="columns"
      :dataSource="taskList"
      rowKey="taskId"
      :pagination="false"
    >
      <template slot="status" slot-scope="text">
        <a-tag :color="statusColorMap[text]">
          {{ statusTextMap[text] }}
        </a-tag>
      </template>
      
      <template slot="action" slot-scope="text, record">
        <a @click="handleView(record)">查看详情</a>
        <a-divider type="vertical" />
        <a @click="handleEdit(record)">编辑</a>
      </template>
    </a-table>

    <!-- 详情模态框 -->
    <a-modal
      title="补考任务详情"
      :visible="detailVisible"
      @cancel="detailVisible = false"
      :footer="null"
      width="800px"
    >
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="任务ID">{{ currentTask.taskId }}</a-descriptions-item>
        <a-descriptions-item label="任务名称">{{ currentTask.taskName }}</a-descriptions-item>
        <a-descriptions-item label="学年学期">{{ currentTask.academicTerm }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="statusColorMap[currentTask.status]">
            {{ statusTextMap[currentTask.status] }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="补考课程数">{{ currentTask.courseCount }}</a-descriptions-item>
        <a-descriptions-item label="补考学生数">{{ currentTask.studentCount }}</a-descriptions-item>
        <a-descriptions-item label="创建时间" :span="2">{{ currentTask.createTime || '2024-06-15 14:30:22' }}</a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{ currentTask.remark || '无' }}</a-descriptions-item>
      </a-descriptions>

      <a-divider>补考课程列表</a-divider>
      <a-table
        :columns="courseColumns"
        :dataSource="mockCourseData"
        rowKey="courseId"
        size="small"
        :pagination="false"
      />
    </a-modal>

    <!-- 编辑模态框 -->
    <a-modal
      title="编辑补考任务"
      :visible="editVisible"
      @ok="handleEditSubmit"
      @cancel="editVisible = false"
      width="600px"
    >
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="任务名称">
          <a-input
            v-decorator="[
              'taskName',
              {
                initialValue: currentTask.taskName,
                rules: [{ required: true, message: '请输入任务名称' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="学年学期">
          <a-input
            v-decorator="[
              'academicTerm',
              {
                initialValue: currentTask.academicTerm,
                rules: [{ required: true, message: '请输入学年学期' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="状态">
          <a-select
            v-decorator="[
              'status',
              {
                initialValue: currentTask.status,
                rules: [{ required: true, message: '请选择状态' }]
              }
            ]"
          >
            <a-select-option value="pending">待开始</a-select-option>
            <a-select-option value="processing">进行中</a-select-option>
            <a-select-option value="completed">已完成</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            v-decorator="['remark', { initialValue: currentTask.remark || '' }]"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '任务ID', dataIndex: 'taskId' },
        { title: '任务名称', dataIndex: 'taskName' },
        { title: '学年学期', dataIndex: 'academicTerm' },
        { title: '补考课程数', dataIndex: 'courseCount' },
        { title: '补考学生数', dataIndex: 'studentCount' },
        { title: '状态', scopedSlots: { customRender: 'status' } },
        { title: '操作', scopedSlots: { customRender: 'action' } }
      ],
      courseColumns: [
        { title: '课程编号', dataIndex: 'courseId' },
        { title: '课程名称', dataIndex: 'courseName' },
        { title: '任课教师', dataIndex: 'teacher' },
        { title: '补考人数', dataIndex: 'studentCount' },
        { title: '考试时间', dataIndex: 'examTime' },
        { title: '考试地点', dataIndex: 'examLocation' }
      ],
      taskList: [
        {
          taskId: 'T2023001',
          taskName: '2022-2023学年第一学期补考',
          academicTerm: '2022-2024-1',
          courseCount: 12,
          studentCount: 45,
          status: 'pending',
          createTime: '2024-06-10 09:30:22',
          remark: '第一学期期末考试补考'
        },
        {
          taskId: 'T2023002',
          taskName: '2022-2023学年第二学期补考',
          academicTerm: '2022-2024-2',
          courseCount: 8,
          studentCount: 32,
          status: 'processing',
          createTime: '2024-06-15 14:30:22',
          remark: '第二学期期末考试补考'
        },
        {
          taskId: 'T2022001',
          taskName: '2021-2022学年第二学期补考',
          academicTerm: '2021-2022-2',
          courseCount: 15,
          studentCount: 60,
          status: 'completed',
          createTime: '2022-06-20 10:15:45',
          remark: '上学期期末考试补考'
        }
      ],
      statusTextMap: {
        pending: '待开始',
        processing: '进行中',
        completed: '已完成'
      },
      statusColorMap: {
        pending: 'orange',
        processing: 'blue',
        completed: 'green'
      },
      detailVisible: false,
      editVisible: false,
      currentTask: {},
      mockCourseData: [
        {
          courseId: 'C001',
          courseName: '高等数学（上）	',
          teacher: '王芳',
          studentCount: 15,
          examTime: '2024-09-10 08:30',
          examLocation: '1号教学楼201'
        },
        {
          courseId: 'C002',
          courseName: 'PLC与工业控制技术',
          teacher: '李廷',
          studentCount: 12,
          examTime: '2024-09-10 10:30',
          examLocation: '2号教学楼105'
        },
        {
          courseId: 'C003',
          courseName: '计算机基础',
          teacher: '王雪',
          studentCount: 8,
          examTime: '2024-09-11 14:00',
          examLocation: '实验楼302'
        }
      ]
    }
  },
  
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  
  methods: {
    handleView(record) {
      this.currentTask = record
      this.detailVisible = true
    },
    
    handleEdit(record) {
      this.currentTask = record
      this.editVisible = true
      
      // 解决异步问题，确保表单已初始化
      this.$nextTick(() => {
        this.form.setFieldsValue({
          taskName: record.taskName,
          academicTerm: record.academicTerm,
          status: record.status,
          remark: record.remark || ''
        })
      })
    },
    
    handleEditSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 更新任务数据
          const updatedTask = {
            ...this.currentTask,
            ...values
          }
          
          // 在实际项目中，这里应该是调用API更新数据
          const index = this.taskList.findIndex(item => item.taskId === this.currentTask.taskId)
          if (index !== -1) {
            this.$set(this.taskList, index, updatedTask)
          }
          
          this.$message.success('任务更新成功')
          this.editVisible = false
        }
      })
    }
  }
}
</script>